SlideShare una empresa de Scribd logo
Colegio “Nueve De Octubre”

      ESTILOS
        CSS
        Katherine Torres
             3ero BI
       Lcdo. Luis Sánchez
OBJETIVO PRIMORDIAL DE CSS
   definir un lenguaje estándar para
    diseñar interfaces para internet, sin
    importar el software o dispositivo que
    interprete los documentos.
   Nombra tus atributos de acuerdo a su contenido, no su diseño
   A veces se tiende a usar nombres de clases e id’s de acuerdo al
    diseño que queremos lograr:
    <div id="menu-derecha">
     <a class="link-rojo">Logout</a>
    </div>
   Si alguna vez decides modificar la hoja de estilos puedes terminar
    con un div id=”menu-derecha” que se encuentre a la izquierda
    o un link class=”link-rojo” de color amarillo. No muy fácil de
    entender.
   Tanto HTML como sus atributos fueron pensados para estructurar
    los documentos semánticamente, sin importar su diseño. Por esto
    es más sensato utilizar atributos que hablen del tipo de contenidos
    que contienen:
    <div id="menu-principal">
     <a class="link-logout">Logout</a>
    </div>

   En el modelo de cajas de IE5, el ancho final de un elemento
    es el indicado en el atributo “width”. Los bordes, paddings y
    márgenes se cuentan hacia dentro de la caja:
   #mi-caja {
     width: 200px;
     margin: 10px;
     border: 5px;
   }
   /*
   Para IE5, el ancho final de esta caja es 200px;
   */

 */
 Para Firefox, Opera, Safari y otros el ancho final
 es width + bordes + paddings + margins = 230px!
 */
   // HTML
    <div id="contenedor">
      <div id="contenido">
      Este es un contenido.
      </div>
    </div>

    // CSS
    #contenedor {
    width: 200px;
   }
   #contenido {
     margin:10px;
     padding: 5px;
   }

Más contenido relacionado

PDF
Taller de Maquetación Web
PDF
PPTX
Lenguaje html y css ..
PPTX
HTML5, CSS3, Responsive Design
PDF
Semana 3 Introduccion CSS
PPTX
Diseño y Maquetacion
PDF
Semana 3 Maquetación CSS
PDF
Smacss. Organizando css
Taller de Maquetación Web
Lenguaje html y css ..
HTML5, CSS3, Responsive Design
Semana 3 Introduccion CSS
Diseño y Maquetacion
Semana 3 Maquetación CSS
Smacss. Organizando css

La actualidad más candente (19)

PPTX
Diseño y maquetación de sitios web.ppt
PDF
CSS - Arquitectura Escalable y Modular
PPTX
Conceptos html
PPTX
PPTX
DOCX
Julian aranda , edison arciniegas
PPTX
Una Página WEB
PPT
Clase 07 04 08
PDF
Sass: CSS con Superpoderes
PPTX
Htmlbasico
PDF
Portal web basico
PPSX
Dw mario
PPTX
Dn11 u3 a6_sgao
PPT
Presentación sobre Diseño Web
PPTX
El código html
PPTX
Qué es css
PPTX
Css.html(1)
PPTX
Almacenamiento y gestión de la información
Diseño y maquetación de sitios web.ppt
CSS - Arquitectura Escalable y Modular
Conceptos html
Julian aranda , edison arciniegas
Una Página WEB
Clase 07 04 08
Sass: CSS con Superpoderes
Htmlbasico
Portal web basico
Dw mario
Dn11 u3 a6_sgao
Presentación sobre Diseño Web
El código html
Qué es css
Css.html(1)
Almacenamiento y gestión de la información
Publicidad

Similar a Css (20)

KEY
Presentación CSS y HTML en Gummurcia
PDF
Hojas de Estilo en Cascada - CSS
PPTX
Introducción a Foundation 5
PPTX
Introducción a Foundation 5
PDF
Diseño de paginas con html1
PPT
crossmedia 03: css
PDF
HTML y CSS
PDF
Mexital Css
PDF
4505.07 estilos usando master pages y css
PPTX
HOJAS DE ESTILO CSS.pptx instituto jaime cerron palomino
PPTX
HOJAS DE ESTILO CSS.pptx instituto jaime cerron palomino
PDF
Maquetacion
PPTX
Css posicionamiento de pag web presentacion de la semana
PDF
Hojas de estilos css
PDF
Introducción a los Frameworks CSS
PDF
Frameworks CSS
PDF
Programacion web
PPTX
Diseño de Paginas Web modelo de caja y contenedores caja
PPT
Sesion01
Presentación CSS y HTML en Gummurcia
Hojas de Estilo en Cascada - CSS
Introducción a Foundation 5
Introducción a Foundation 5
Diseño de paginas con html1
crossmedia 03: css
HTML y CSS
Mexital Css
4505.07 estilos usando master pages y css
HOJAS DE ESTILO CSS.pptx instituto jaime cerron palomino
HOJAS DE ESTILO CSS.pptx instituto jaime cerron palomino
Maquetacion
Css posicionamiento de pag web presentacion de la semana
Hojas de estilos css
Introducción a los Frameworks CSS
Frameworks CSS
Programacion web
Diseño de Paginas Web modelo de caja y contenedores caja
Sesion01
Publicidad

Más de Katty Torres (7)

PPTX
La educacion en el ecuador
PPTX
Skype123
PPTX
Estilos css
PPTX
PPTX
Música e imágenes con derecho de reproducción
PPTX
Música e imágenes con derecho de reproducción
PPTX
Música e imágenes con derecho de reproducción
La educacion en el ecuador
Skype123
Estilos css
Música e imágenes con derecho de reproducción
Música e imágenes con derecho de reproducción
Música e imágenes con derecho de reproducción

Css

  • 1. Colegio “Nueve De Octubre” ESTILOS CSS Katherine Torres 3ero BI Lcdo. Luis Sánchez
  • 2. OBJETIVO PRIMORDIAL DE CSS  definir un lenguaje estándar para diseñar interfaces para internet, sin importar el software o dispositivo que interprete los documentos.
  • 3. Nombra tus atributos de acuerdo a su contenido, no su diseño  A veces se tiende a usar nombres de clases e id’s de acuerdo al diseño que queremos lograr:  <div id="menu-derecha">  <a class="link-rojo">Logout</a>  </div>  Si alguna vez decides modificar la hoja de estilos puedes terminar con un div id=”menu-derecha” que se encuentre a la izquierda o un link class=”link-rojo” de color amarillo. No muy fácil de entender.  Tanto HTML como sus atributos fueron pensados para estructurar los documentos semánticamente, sin importar su diseño. Por esto es más sensato utilizar atributos que hablen del tipo de contenidos que contienen:  <div id="menu-principal">  <a class="link-logout">Logout</a>  </div> 
  • 4. En el modelo de cajas de IE5, el ancho final de un elemento es el indicado en el atributo “width”. Los bordes, paddings y márgenes se cuentan hacia dentro de la caja:  #mi-caja {  width: 200px;  margin: 10px;  border: 5px;  }  /*  Para IE5, el ancho final de esta caja es 200px;  */   */  Para Firefox, Opera, Safari y otros el ancho final  es width + bordes + paddings + margins = 230px!  */
  • 5. // HTML  <div id="contenedor">  <div id="contenido">  Este es un contenido.  </div>  </div>   // CSS  #contenedor {  width: 200px;  }  #contenido {  margin:10px;  padding: 5px;  }